<template>
  <div class="reset-pwd q-gutter-y-sm q-px-lg">
    <div class="warning-tips text-grey-7 text-weight-medium row items-center no-wrap q-my-lg">
      <q-icon class="map-warning-tips-icon" name="mdi-information-variant" size="1.25rem"></q-icon>
      <span>{{ $t('ResetPwdTip2') }}</span>
    </div>
    <!-- 用户名 -->
    <q-input ref="nameInput" v-model="formInfo.username" :loading="loading" class="q-mb-lg" dense outlined readonly>
      <template v-slot:prepend>
        <q-icon name="account_circle" />
      </template>
    </q-input>
    <!-- 验证码 -->
    <q-input ref="codeInput" v-model="formInfo.verificationCode" :loading="loading" :placeholder="`${$t('AuthCode')}`"
             :readonly="loading" :rules="[val => codeVali(val)]" autofocus dense lazy-rules outlined
             @keydown.enter="setKeyCode" @keyup.enter="login('Code')">
      <template v-slot:prepend>
        <q-icon name="verified_user" />
      </template>
      <template v-slot:after>
        <q-btn :disable="msgKey" :loading="loading" class="reset-pwd-box no-border" color="primary" outline
               @click="againSend">
          {{ msgKey ? msgTime + ' S' : $t('SendAgain') }}
        </q-btn>
      </template>
    </q-input>

    <q-btn :loading="loading" class="bg-login-btn full-width text-subtitle1 text-weight-bold q-mb-xl" flat rounded
           text-color="white" @click="login">
      {{ `${$t('NextStep')}` }}
    </q-btn>
  </div>
</template>

<script setup>

import { postAPI } from 'src/api'
import { i18n } from 'boot/i18n'
import { inject, onMounted, ref } from 'vue'

const props = defineProps({
  step: Number,
  username: String,
  captchaKey: String
})

const TENANT_ID = inject('TENANT_ID')
const emits = defineEmits(['update:step', 'update:captchaKey'])

const MSGTIME = 60
const msgTime = ref(MSGTIME)
const keyCode = ref(0)
const msgKey = ref(false)
const loading = ref(false)
const codeInput = ref(null)
const nameInput = ref(null)
const formInfo = ref({ captchType: 'MAIL', tenantId: TENANT_ID, username: props.username })

const codeVali = val => {
  if (!val) return `${i18n.t('PleaseInput')} ${i18n.t('AuthCode')}`
  return true
}

const countdown = () => {
  if (msgKey.value) return
  msgKey.value = true
  const timer = setInterval(() => {
    msgTime.value--
    if (msgTime.value === 0) {
      msgTime.value = MSGTIME
      msgKey.value = false
      clearInterval(timer)
    }
  }, 1000)
}

onMounted(() => countdown())

const againSend = () => {
  loading.value = !loading.value
  postAPI('/auth/api/captcha/sendVerificationCode', formInfo.value, data => {
    emits('update:captchaKey', data.captchaKey)
    loading.value = !loading.value
  }, () => {
    loading.value = !loading.value
  })
}

const setKeyCode = e => (keyCode.value = e.keyCode)

const login = keyType => {
  if (keyCode.value === 229) return // 中文输入法输入中文情况下 keydown.enter事件键值为229
  if (keyType === 'Input' && !nameInput.value.validate()) return nameInput.value.focus()
  if (keyType === 'Code' && !codeInput.value.validate()) return codeInput.value.focus()

  if (!nameInput.value.validate()) return nameInput.value.focus()
  if (!codeInput.value.validate()) return codeInput.value.focus()

  codeInput.value.blur()
  nameInput.value.blur()

  loading.value = !loading.value
  formInfo.value.captchaKey = props.captchaKey

  postAPI('/auth/api/captcha/verificationByCode', formInfo.value, data => {
    emits('update:step', 3)
    emits('update:captchaKey', data.captchaKey)
    loading.value = !loading.value
  }, () => {
    loading.value = !loading.value
  })
}
</script>